<template>
  <div>
    <!--工具条-->
    <el-col
      :span="24"
      class="toolbar"
      style="
        padding-bottom: 0px;
        padding-bottom: 0px;
        display: flex;
        justify-content: space-between;
      "
    >
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input
            v-model="filters.uid"
            :placeholder="$t('iptdefault.username')"
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('iptdefault.timeselect')">
          <el-col :span="11">
            <el-date-picker
              type="date"
              :placeholder="$t('iptdefault.starttime')"
              v-model="filters.start"
              style="width: 100%"
            ></el-date-picker>
          </el-col>

          <el-col class="line" :span="2" style="text-align: center">-</el-col>
          <el-col :span="11">
            <el-date-picker
              type="date"
              :placeholder="$t('iptdefault.endtime')"
              v-model="filters.end"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" v-on:click="getUserlisttup">{{$t('publicbtn.query')}}</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="userStatusRefresh">{{$t('publicbtn.refresh')}}</el-button>
        </el-form-item>
      </el-form>
      
       <el-form :inline="true" style="display:flex;align-item:center;">
        <el-form-item>
          <el-button type="primary" @click="exportexcel">{{$t('publicbtn.exportalldata')}}</el-button>
        </el-form-item> 
       <excelexport></excelexport>
      </el-form>
    </el-col>

    <!--列表-->

    <el-table
      id="out-table"
      :data="userlisttopup"
      highlight-current-row
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column prop="userId" :label="$t('field.userid')" width="250"> </el-table-column>
      <el-table-column prop="username" :label="$t('field.cellphone')"  width="250"></el-table-column>
      <el-table-column prop="name" :label="$t('field.upusername')"  width="250"></el-table-column>
      <el-table-column prop="crypto" :label="$t('field.rechargecurrency')" width="250">
      </el-table-column>

      <el-table-column prop="num" :label="$t('field.rechargequantity')" width="250">
        <template slot-scope="props">
          {{ (props.row.num / million).toFixed(8) }}
        </template>
      </el-table-column>

      <el-table-column :label="$t('field.wallettype')"  width="250">
        <template slot-scope="props">
          {{
            props.row.type == 1
              ? $t('field.appWallet')
              : props.row.type == 2
              ?  $t('field.otcWallet')
              : props.row.type == 0
              ?  $t('field.appWallet')
              : ""
          }}
        </template>
      </el-table-column>

      <el-table-column prop="fromAddress" :label="$t('field.sourceaddress')" width="250">
      </el-table-column>
      <el-table-column prop="toAddress" :label="$t('field.destinationaddress')" width="250">
      </el-table-column>

      
      <el-table-column prop="hash" :label="$t('field.hash')" width="250"> </el-table-column>
      <el-table-column prop="referral" :label="$t('field.recommenderId')" width="250"> </el-table-column>

      <el-table-column prop="createdAt" :label="$t('field.creationtime')" width="250">
      </el-table-column>

      <el-table-column prop="updateAt" :label="$t('field.upeationtime')" width="250">
      </el-table-column>

      <el-table-column prop="remark" :label="$t('field.remarks')"  width="250">
      </el-table-column>
    </el-table>
    <!--分页 -->
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="userlistTotal"
        :page-size="filters.size"
        @current-change="current_changes"
        :current-page="filters.page"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import excelexport from "@/components/export.vue";
import exportData from "@/components/export.js";

import { getUserRequest } from "@/api/api";

export default {
  components: {
    excelexport,
  },
  data() {
    return {
      million: 100000000,
      userlistTotal: null,
      loading: false,
      filters: {
        uid: "",
        page: 1,
        size: 10,
        start: "",
        end: "",
      },
      paramsTopUp: {},
      userlisttopup: null,
    };
  },
    computed:{
      tableData:function(){
    return [[
      this.$t('field.userid'),this.$t('field.cellphone'),this.$t('field.upusername'),this.$t('field.rechargecurrency'),this.$t('field.rechargequantity'),this.$t('field.wallettype'),this.$t('field.sourceaddress'),this.$t('field.destinationaddress'),'hash',this.$t('field.recommenderId'),this.$t('field.creationtime'),this.$t('field.upeationtime'),this.$t('field.remarks')
      ]]

      
      }},
  methods: {
    getUserlisttop() {
      this.loading = true;
      this.paramsTopUp = JSON.parse(JSON.stringify(this.filters));
      if (this.paramsTopUp.start != "") this.paramsTopUp.start = new Date(this.paramsTopUp.start).getTime();
      if (this.paramsTopUp.end != "") this.paramsTopUp.end = new Date(this.paramsTopUp.end).getTime();
      getUserRequest(this.paramsTopUp, "/getRechargeRecordList").then((res) => {
        var data = res.data;
        if (data.code == 200) {
          this.userlisttopup = data.data.list;
          this.userlistTotal = data.data.total;
        } else {
          this.$message({
            message: data.message,
            type: "error",
          });
        }
        this.loading = false;
      });
    },

    // 点击查询
    getUserlisttup() {
      this.filters.page = 1;
      this.getUserlisttop();
    },
    // 分页
    current_changes(pager) {
      this.filters.page = pager;
      this.getUserlisttop();
    },
    // 刷新
    userStatusRefresh() {
      this.filters.page = 1;
      this.getUserlisttop();
    },

    exportexcel(){
      let tableDatatilte = ['userId','username','name','crypto','num','type','fromAddress','toAddress','hash','referral','createdAt','updateAt','remark']
      let tableData=this.tableData
      // [['用户ID','手机号','用户名称','充值货币','充值数量','钱包类型','源地址','目标地址','hash','创建时间','更新时间','备注']]
      let dataMsg =  {start:'',end:'',uid:this.filters.uid,page:1,size:this.million};
        dataMsg.start = JSON.parse(JSON.stringify(this.filters.start));
        dataMsg.end = JSON.parse(JSON.stringify(this.filters.end));
        if(dataMsg.start&&dataMsg.end){
        let _this = this
        if(dataMsg.start !='') dataMsg.start = (new Date(dataMsg.start)).getTime();
        if(dataMsg.end !='') dataMsg.end = (new Date(dataMsg.end)).getTime();
        getUserRequest(dataMsg, "/getRechargeRecordList").then((res) => {
          if(res.data.code ==200){
              var datalist = res.data.data.list
                for (let i = 0; i < datalist.length; i++) {
                    if( datalist[i]['type'] == 1){
                      datalist[i]['type'] = this.$t('field.appWallet')
                    }else if( datalist[i]['type'] == 2){
                      datalist[i]['type'] =  this.$t('field.otcWallet')
                    }else if(datalist[i]['type'] == 2){
                      datalist[i]['type'] =  this.$t('field.appWallet')
                    }
                      datalist[i]['num'] =(datalist[i]['num'] / _this.million).toFixed(8)
                  }
                  let exportName = this.$t('export.depositName')

                      exportData.exportTable(datalist,tableData,tableDatatilte,exportName)
          }else{
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        }else{
      this.$message({
        message: this.$t('bulletframe.selecttime'),
        type: "error",
      });
        }
          
          

    }
  },
  mounted() {
    

  },
  created() {
    this.getUserlisttop();
  },
};
</script>

<style scoped>
.pagination {
  text-align: center;
  margin-top: 20px;
}
</style>